<!-- 司机入驻 -->
<template>
	<view class="driverEnter">
		<!-- 审核中 S -->
		<view class="column_align tp-bgf tp-mb20" v-if="auditStatus == 0">
			<image class="audit-img tp-mt80" src="static/audit-ing.png" mode=""></image>
			<view class="tp-lh88 tp-mt20">
				司机入驻信息正在审核中
			</view>
		</view>
		<!-- 审核中 E -->
		<!-- 审核成功 S -->
		<view class="column_align tp-bgf tp-mb20" v-if="auditStatus == 1">
			<image class="audit-img tp-mt80" src="static/audit-finish.png" mode=""></image>
			<view class="tp-lh88 tp-mt20">
				恭喜你审核信息已通过
			</view>
		</view>
		<!-- 审核成功 E -->
		
		<!-- 审核失败 S -->
		<view class="column_align tp-bgf tp-mb20" v-if="auditStatus == 2">
			<image class="audit-img tp-mt80" src="static/audit-over.png" mode=""></image>
			<view class="tp-lh88 tp-mt20">
				审核信息失败
			</view>
			<view class="tp-br8  tp-yellow tp-fz26 tp-lh54">
				原因：{{reason || ''}}
			</view>
			<view class="tp-w520 tp-h80 center_combo tp-br40 tp-fcF tp-mt80 tp-bc tp-mb20" @click="auditStatus = 3">
				重新提交
			</view>
		</view>
		<!-- 审核失败 E -->
		<view class="driverEnter_head">
			<view class="driverEnter_head_li flex flex_between align_center">
				<view class="driverEnter_head_li_txt">姓名</view>
				<view class="driverEnter_head_li_ipt">
					<input type="text" placeholder="请输入姓名" v-model="form.name" placeholder-style="color:#999999" />
				</view>
			</view>
			<view class="driverEnter_head_li flex flex_between align_center">
				<view class="driverEnter_head_li_txt">手机号</view>
				<view class="driverEnter_head_li_ipt">
					<input type="number" maxlength="11" placeholder="请输入手机号" v-model="form.phone" placeholder-style="color:#999999" />
				</view>
			</view>
			<view class="driverEnter_head_li flex flex_between align_center">
				<view class="driverEnter_head_li_txt">证件号码</view>
				<view class="driverEnter_head_li_ipt">
					<input type="idcard" placeholder="请输入身份证号码" maxlength="18" v-model="form.idCard" placeholder-style="color:#999999" />
				</view>
			</view>
			<view class="driverEnter_head_identity">
				<view class="driverEnter_head_identity_txt">身份证</view>
				<view class="driverEnter_head_identity_img flex align_center flex_between">
					<view class="driverEnter_head_identity_img_li" @click="handleUploadIDImgPositive('cardFront')">
						<image :src="/^[http | https]/.test(cardFront) ? cardFront : (wwwImgUrl + cardFront) " mode=""></image>
					</view>
					<view class="driverEnter_head_identity_img_li" @click="handleUploadIDImgPositive('cardBack')">
						<image :src="/^[http | https]/.test(cardBack) ? cardBack : (wwwImgUrl + cardBack) " mode=""></image>
					</view>
					<view class="driverEnter_head_identity_img_lis" @click="handleUploadIDImgPositive('cardHandle')">
						<image :src="/^[http | https]/.test(cardHandle) ? cardHandle : (wwwImgUrl + cardHandle) " mode=""></image>
					</view>
				</view>
			</view>
			<view class="driverEnter_head_identity">
				<view class="driverEnter_head_identity_txt">驾驶证</view>
				<view class="driverEnter_head_identity_img flex align_center flex_between">
					<view class="driverEnter_head_identity_img_li" @click="handleUploadIDImgPositive('cardDriver')">
						<image :src="/^[http | https]/.test(cardDriver) ? cardDriver : (wwwImgUrl + cardDriver)" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 须知 S -->
			<view class="level_align tp-h88   tp-fc333 tp-fz28 tp-mt20 tp-lh44" v-if="auditStatus == 3" @click="isRead = !isRead">
				<image v-if="!isRead" class="tp-img28 tp-mr20" src="static/choose0-icon.png" mode=""></image>
				<image v-if="isRead" class="tp-img28 tp-mr20" src="static/choose1-icon.png" mode=""></image>
				<view class="flex-1 level_align flex_wrap">
					同意 <text class="tp-fc" @click.stop="pageJumps('/pages/others/depositRule?type=25&name=司机入驻协议')">《司机入驻协议》</text>
			
				</view>
			</view>
			<!-- 须知 E -->
		</view>
		<view class="driverEnter_btn flex align_center flex_center" @click="submitForm" v-if="auditStatus == 3">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				auditStatus: 3, // 状态 0.审核中 ,1成功 2.失败 3未申请
				cardHandle: 'static/shouchi.png', // 手持
				cardFront: 'static/zhengmian.png', // 身份证正面
				cardBack: 'static/fanmian.png', // 身份证反面
				cardDriver: './static/jiashizheng.png', // 	驾驶证
				reason: '', // 	原因
				isRead: false, // 是否阅读须知
				form: {
					name: '',
					phone: '',
					idCard: '',
					cardHandle: '', // 手持
					cardFront: '', // 身份证正面
					cardBack: '', // 身份证反面
					cardDriver: '', // 	驾驶证
				}
			};
		},
		onShow() {
			this.getApplyInfo()
		},
		onPullDownRefresh() {
			this.getApplyInfo()
		},
		methods: {
			// 请求入驻信息
			getApplyInfo() {
				this.$http.get(this.$api.shopDriverInfo).then(res => {
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						if (res.data.isApply == 0) {
							this.auditStatus = res.data.auditStatus
							this.form.name = res.data.name
							this.form.phone = res.data.phone
							this.form.idCard = res.data.idCard
							this.cardHandle = res.data.cardHandle
							this.cardBack = res.data.cardBack
							this.cardFront = res.data.cardFront
							this.cardDriver = res.data.cardDriver
							this.reason = res.data.reason
						}
					}
				})
			},
			// 提交表单
			submitForm() {
				let {
					name,
					phone,
					idCard,
					cardHandle,
					cardBack,
					cardFront,
					cardDriver,
				} = this.form

				if (!this.form.name) return uni.showToast({
					title: '请填写姓名',
					icon: 'none'
				})
				if (!this.form.phone) return uni.showToast({
					title: '请填写手机号',
					icon: 'none'
				})
				if (!this.$regexPhone.test(this.form.phone)) return uni.showToast({
					title: '请检查手机号是否正确',
					icon: 'none'
				})
				if (!this.form.idCard) return uni.showToast({
					title: '请填写身份证号',
					icon: 'none'
				})
				if (!this.$regexID.test(this.form.idCard)) return uni.showToast({
					title: '请检查身份证号是否正确',
					icon: 'none'
				})
				if (!this.form.cardDriver) return uni.showToast({
					title: '请上传驾驶证',
					icon: 'none'
				})
				if (!this.isRead) return uni.showToast({
					title: '请阅读协议',
					icon: 'none'
				})

				this.$http.post(this.$api.centershopDriverApply, {
					name,
					phone,
					idCard,
					cardHandle,
					cardBack,
					cardFront,
					cardDriver
				}).then(res => {
					if (res.code === 200) {
						this.getApplyInfo()
					}
				})
			},
			// 上传图片
			handleUploadIDImgPositive(name) {
				if(this.auditStatus !== 3) return
				const _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera '],
					success: ({
						tempFilePaths
					}) => {
						uni.uploadFile({
							url: _this.$baseUrl + _this.$api.uploadFile,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								let uploadData = JSON.parse(uploadFileRes.data)
								console.log(uploadData);
								let url = _this.$imgUrl + uploadData.url
								_this.form[name] = uploadData.url
								_this[name] = url
								// _this.$set(this.updata, key, uploadData.url)
							}
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.driverEnter {
		padding: 20rpx 30rpx 40rpx 30rpx;

		.driverEnter_head {
			padding: 0 25rpx;
			margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.driverEnter_head_li {
				padding: 36rpx 0;
				border-bottom: 2rpx solid #EBEBEB;

				&:last-child {
					border-bottom: none;
				}

				.driverEnter_head_li_txt {
					font-size: 30rpx;
				}

				.driverEnter_head_li_ipt {
					font-size: 30rpx;
					text-align: right;
				}
			}

			.driverEnter_head_identity {
				.driverEnter_head_identity_txt {
					font-size: 30rpx;
					padding: 40rpx 0 30rpx 0;
				}

				.driverEnter_head_identity_img {
					width: 100%;
					flex-wrap: wrap;

					.driverEnter_head_identity_img_li {
						width: 296rpx;
						height: 188rpx;
					}

					.driverEnter_head_identity_img_lis {
						width: 220rpx;
						height: 280rpx;
						margin-top: 20rpx;
					}
				}
			}
		}

		.driverEnter_btn {
			width: 580rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #00B4FF, #10DAFF);
			border-radius: 40rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			margin: 0 auto;
		}
	}
	.audit-img {
		width: 150rpx;
		height: 142rpx;
	}
</style>
